<template>
	<view class="container f-a-start">
		<view class="category-list">
			<scroll-view scroll-y :show-scrollbar="false" style="height: 100%;">
				<view class="cate-item ellipsis1" v-for="(v,i) in categoryList" :key="i"
					:class="{'actived': params.cate_id === v.cate_id}" @click="changeCategoryItem(v.cate_id)">
					{{v.name}}
				</view>
				<view class="cate-item" style="height: 160rpx;"></view>
			</scroll-view>
		</view>

		<view class="product-list">
			<template v-if="productList.length!==0">
				<scroll-view scroll-y :show-scrollbar="false" class="product-scroll" @scrolltolower="onScollReachBottom">
					<view class="product-item" v-for="(item,i) in productList" :key="i" @click="goDetail(item.id)">
						<image :src="$imgUrl(item.image)" lazy-load mode="aspectFill" class="item-img"></image>
						<view class="item-info">
							<view class="ellipsis1 info-name">{{item.name}}</view>
							<view class="info-price f-j-between f-a-end">
								<view class="price">{{item.price}}</view>
								<view class="payed">{{item.attr_name}}</view>
							</view>
						</view>
					</view>
					<u-loadmore line :status="loadStatus" />
					<u-gap height="20"></u-gap>
				</scroll-view>
			</template>

			<dataEmpty v-else></dataEmpty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryId: 0,
				categoryList: [],
				params: {
					page: 1,
					limit: 10,
					total: 0,
					cate_id: null
				},
				productList: []
			}
		},
		computed: {
			loadStatus() {
				if (this.productList.length == 0) return ""
				if (this.productList.length < this.params.total) return 'loadmore'
				if (this.productList.length == this.params.total) return "nomore"
			}
		},
		onLoad() {
			this.getProductCateList()
		},
		methods: {
			//商品分类
			getProductCateList() {
				this.$api.get_shop_goodsCate().then(res => {
					this.categoryList = res || []
					this.params.cate_id = (res || [])[0].cate_id
					this.getProductList()
				})
			},

			//获取商品列表
			getProductList() {
				this.$api.get_shop_goodsList(this.params).then(res => {
					let {
						list,
						total
					} = res
					this.productList = this.productList.concat(list || [])
					this.params.total = total
				})
			},

			//重置数据
			onRefreshData() {
				this.params.page = 1
				this.productList = []
				this.getProductList()
			},

			//切换分类
			changeCategoryItem(id) {
				this.params.cate_id = id
				this.onRefreshData()
			},

			//跳转商品详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/detail?id=' + id
				})
			},

			//滚动到底部
			onScollReachBottom() {
				if (this.productList.length == this.params.total) {
					return
				}
				this.params.page++
				this.getProductList()
			}
		},
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F4F5F7;
	}
</style>
<style scoped lang="scss">
	.container {
		height: 100%;
	}

	.category-list {
		height: 100%;
		background-color: #ffffff;

		.cate-item {
			width: 122rpx;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0rpx 10rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;

			&.actived {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFC046;
				box-shadow: inset 0px 0px 1px 0px #FFC046;
				position: relative;

				&:before {
					content: '';
					width: 6rpx;
					height: 68rpx;
					background-color: #FFC046;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
				}
			}
		}
	}

	.product-list {
		flex: 1;
		height: 100%;
		padding: 14rpx 16rpx 0;
		overflow-y: scroll;

		.product-scroll {
			height: 100%;			
		}

		.product-item {
			width: 48.5%;
			background: #FFFFFF;
			box-shadow: 0px 0px 14rpx 0px rgba(0, 0, 0, 0.11);
			border-radius: 8rpx;
			margin-bottom: 20rpx;
			display: inline-block;
			margin-right: 3%;

			&:nth-child(2n) {
				margin-right: 0;
			}

			.item-img {
				width: 100%;
				height: 260rpx;
				display: block;
				border-radius: 8rpx 8rpx 0 0;
				background-color: #FFFFFF;
			}

			.item-info {
				padding: 10rpx 10rpx;

				border-radius: 0 0 8rpx 8rpx;

				.info-name {
					font-weight: 400;
					// font-size: 20rpx;
					font-size: calc(20rpx * 1.5);
					color: #333333;
				}

				.info-price {
					margin-top: 2rpx;

					.price {
						font-weight: 500;
						// font-size: 22rpx;
						font-size: calc(22rpx * 1.5);
						color: #FF691B;
						position: relative;

						&:before {
							content: '¥';
							// font-size: 20rpx;
							font-size: calc(20rpx * 1.5);
						}
					}

					.payed {
						font-weight: 400;
						// font-size: 18rpx;
						font-size: calc(18rpx * 1.5);
						color: #7C7C7C;
					}
				}
			}
		}
	}
</style>